<template>
  <!-- 用户详情弹窗 -->
  <el-dialog title="用户详情" :visible.sync="visible" width="400px" @close="close">
    <!-- 用户信息展示区域 -->
    <el-descriptions :column="1" border>
      <el-descriptions-item label="姓名">{{ user.name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ user.gender }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{ user.idCard }}</el-descriptions-item>
      <el-descriptions-item label="出生日期">{{ user.birthDate }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ user.address }}</el-descriptions-item>
    </el-descriptions>
    <!-- 弹窗底部按钮区域 -->
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
// 接收父组件传递的用户信息
const props = defineProps({ user: Object })
// 定义事件emit
const emit = defineEmits(['close'])
// 控制弹窗显示/隐藏
const visible = ref(true)
// 关闭弹窗
function close() {
  emit('close')
}
</script> 